<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    /*
    BFC Block Formatting Context 块级格式化上下文
    IFC Inline Formatting Context 行级格式化上下文
    block 相关的概念
      - Block Container：里面有 BFC 的（能容纳正常流的盒，里面就有 BFC ）
        - display 为 block inline-block table-caption 的
        - flex item
        - grid cell
      - Block-level Box: 外面有 BFC 的
      - Block Box = Block Container + Block-level Box: 里外都有 BFC 的
    Establish BFC (创建 BFC) 
      - floats (浮动的元素)
      - absolutely positioned （相对定位和绝对定位的元素）
      - 是 Block Conteiner (像 inline-blocks， table-cells，table-captions，flex items, grid cell ...) 但是不是 Block Box 的
      - 是 Block Box 但是 overflow 的值不为 visible 的
    存在 BFC 合并
      - Block Box 并且 overflow: visible
        - BFC 合并与 folat 
        - BFC 合并与边距折叠 （** 边距折叠只会发生在同一个 BFC 中 **）
    */
  </script>
  <style>
    div {
      /* display: table; */
      height: 100px;
      width: 100px;
    }
  </style>
</head>
<body>
  <div class="a" style="margin-bottom: 20px;background-color: #000; float: left; width: 100%;">a</div>
  <div class="b" style="display: inline-block;margin-top: 20px; background-color: pink;">
    <div class="c" style="margin-top: 30px;background-color: red;height: 70px;width: 70px;"></div>
  </div>
</body>
</html>
